<template>
  <template v-if="hasChildren">
    <a-sub-menu :key="menuItem.path">
      <template #icon>
        <y-icon
          class="!align-baseline"
          v-if="menuItem.icon"
          :icon="menuItem.icon"
        />
      </template>
      <template #title>
        <span>
          <span>{{ menuItem.title }}</span>
        </span>
      </template>
      <MenuItem
        v-for="child in menuItem.children"
        :key="child.key || child.path"
        :menu-item="child"
      />
    </a-sub-menu>
  </template>
  <a-menu-item v-else :key="menuItem.path">
    <template #icon>
      <y-icon
        v-if="menuItem.icon"
        :icon="menuItem.icon"
        class="!align-baseline"
      />
    </template>
    {{ menuItem.title }}
  </a-menu-item>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  menuItem: {
    type: Object,
    required: true,
  },
});

// 检查是否有子菜单
const hasChildren = computed(() => {
  return props.menuItem.children && props.menuItem.children.length > 0;
});
</script>
